<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>03_计算属性和监视</title>
</head>

<body>
    <div id="app">
        姓:<input type="text" name="firstName" v-model="firstName"><br> 名:
        <input type="text" name="lastName" v-model="lastName"><br> 姓名1(单向):
        <input type="text" name="fullName1" v-model="fullName1"><br> 姓名2(单向):
        <input type="text" name="fullName2" v-model="fullName2"><br> 姓名2(双向):
        <input type="text" name="fullName2" v-model="fullName3">

        <!--  取多次fullName1的值,只调用了fullName1()计算方法一次,它把计算结果缓存起来了, fullName1就是缓存的key(属性名),它的返回值就是value(属性值)  -->
        <p>{{fullName1}}</p>
        <p>{{fullName1}}</p>
        <p>{{fullName1}}</p>
    </div>
</body>
<script type="text/javascript" src="../vue.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            firstName: 'A',
            lastName: 'B',
            fullName2: 'A B'
        },
        //计算属性(计算的值存在缓存里)
        computed: {
            fullName1() { //计算属性中的一个方法,方法的返回值作为属性值
                //这个方法什么时候调用? 1.初始化 2.data里的相关属性数据发生改变时
                console.log('fullName1()');
                return this.firstName + ' ' + this.lastName
            },

            fullName3: {
                get() { //回调函数:当需要读取当前属性的值时回调, 根据相关的数据计算并返回当前属性的值
                    return this.firstName + ' ' + this.lastName
                },
                set(value) {
                    const names = value.split(' ');
                    this.firstName = names[0];
                    this.lastName = names[1]
                }
            }
        },
        //监视属性(配置监视)
        watch: {
            firstName(newValue, oldValue) {
                this.fullName2 = newValue + ' ' + this.lastName
            }
        },
    });

    vm.$watch('lastName', function(newValue, oldValue) {
        console.log(this);
        this.fullName2 = this.firstName + ' ' + newValue
    });
</script>

</html>